<template>
  <view class="goods-detail">
    <view class="goods-thumb">
      <image :src="info.thumb" mode="widthFix" class="thumb"></image>
    </view>
    <view class="goods-info">
      <view class="goods-name">{{ info.goodsName }}</view>
      <view class="goods-price"><text>{{ info.integral }}</text>积分</view>
      <view class="goods-number"><text>{{ info.number }}</text>件可兑换</view>
    </view>
    <view class="goods-des">
      <view class="des-title">商品详情</view>
      <view class="des-content">
        <rich-text :nodes="renderContent(info.content)"></rich-text>
      </view>
    </view>
    <view v-if="info.number > 0" class="submit">
      <u-button @click="onExchange">兑换</u-button>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        info: {}
      }
    },
    onLoad(query) {
      this.id = query.id
      this.getData()
    },
    methods: {
      getData() {
        this.$http({
          url: `/index/getIntegralGoodsInfo?integralGoodsId=${this.id}`
        }).then(res => {
          this.info = res.data
        })
      },
      renderContent(content) {
        return content ? content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') : ''
      },
      onExchange() {
        wx.showModal({
          title: '确定兑换这个商品吗?',
          success: res => {
            if (res.confirm) {
              this.toSelectAddress()
              
            }
          }
        })
      },
      toSelectAddress() {
        wx.chooseAddress({
          success: res => {
            console.log(res)
            this.toExchange(JSON.stringify(res))
          }
        })
      },
      
      toExchange(address) {
        this.$http({
          url: `/integralOrder/addIntegralOrder`,
          method: 'post',
          data: {
            integralGoodsId: this.id,
            address
          }
        }).then(res => {
          this.$u.toast('兑换成功')
          setTimeout(() => {
            wx.navigateTo({
              url: '../my/record'
            })
          }, 1500)
        }).catch(err => {
          this.$u.toast(err.msg || '兑换失败')
        })
      }
    },
  }
</script>

<style lang="less">
  .goods-detail {
    padding-bottom: 190rpx;
    .goods-thumb {
      width: 100vw;
      .thumb{
        width: 100%;
      }
    }

    .goods-info {
      padding: 20rpx;
      background-color: #fff;
      .goods-name{
        font-size: 30rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      .goods-price{
        color: red;
        font-size: 30rpx;
        margin-bottom: 10rpx;
      }
        
      .goods-number{
        font-size: 28rpx;
        color: #888;
      }
    }
    .des-title{
      height: 80rpx;
      background-color: #efefef;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
    }
    .des-content{
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      color: #333;
      image{
        width: 100%;
      }
    }
  }
  .submit{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 50rpx;
    background: #fff;
    border-top: 1px solid #e8e8e8;
  }
</style>
